<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic DataGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="/public/stylesheets/metro-blue/easyui.css">
	<link rel="stylesheet" type="text/css" href="/public/stylesheets/icon.css">
	<script type="text/javascript" src="/public/javascripts/jquery.min.js"></script>
	<script type="text/javascript" src="/public/javascripts/jquery.easyui.min.js"></script>
	<script type="text/javascript">
		function addItem(){
			$.ajax({url:"/add",async:false});
			$('#dg').datagrid('reload');
		}

		function delItem(){
			var row = $('#dg').datagrid('getSelected');
			if (!row){
				$.messager.alert('Info', "Please selece on item!");
				return;
			}

			htmlobj=$.ajax({url:"/del/"+row.productid,async:false});
			//$.messager.alert('Info', htmlobj.responseText);

			$('#dg').datagrid('reload');
		}

		var toolbar = [{
			text:'Add',
			iconCls:'icon-add',
			handler:function(){addItem()}
		},{
			text:'Del',
			iconCls:'icon-remove',
			handler:function(){delItem()}
		}];
	</script>
</head>
<body>
	<h2>Basic DataGrid</h2>
	<p>The DataGrid is created from markup, no JavaScript code needed.</p>
	<div style="margin:20px 0;"></div>
	
	<table id="dg" class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
			data-options="singleSelect:true,collapsible:true,url:'/data',method:'get',toolbar:toolbar">
		<thead>
			<tr>
				<th data-options="field:'productid',width:200">Product ID</th>
				<th data-options="field:'productname',width:400,align:'center'">Product Name</th>
				<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
			</tr>
		</thead>
	</table>
</body>
</html>